<style>
    .full_bg {
     position: relative;
     overflow: hidden;
    }
    .full_bg .text-content{
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: #fff;
    }
    .text-content .richtext{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .richtext p{
        margin: 0;
        color: #ccc;
        font-size: 28px;
        line-height: 38px;
        font-weight: 700;
    }
</style>

<div class="full_bg {% unless section.settings.full_width %}page-width{% endunless %}"> 
    {% if section.settings.richtext != blank %}
       <div class="text-content"> <div class="richtext">{{ section.settings.richtext }}</div></div>
    {% endif %}
    <div class="pc-full_bg">
        <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
        >
        {%- if section.settings.image != blank -%}
        <img
            srcset="
            {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
            {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image.width >= 539 -%}{{ section.settings.image | img_url: '2500x' }} 2500w,{%- endif -%}
            {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '2500x' }} 2500w,{%- endif -%}
            {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '2500x' }} 2500w,{%- endif -%}
            {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '2500x' }} 2500w,{%- endif -%}
            {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2500x' }} 2500w,{%- endif -%}
            {%- if section.settings.image.width >= 2500 -%}{{ section.settings.image | img_url: '2500x' }} 2500w,{%- endif -%}
            {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
            data-src="{{ section.settings.image | img_url: '750x' }}"
            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 3 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
            alt="{{ section.settings.image.alt | escape }}"
            loading="lazy"
            class="lazyload"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}"
        >
        {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
   </div>
</div>

<script>
     const fullBg = document.querySelector(".full_bg");
      const textContent = fullBg.querySelector(".text-content");

      const fullBgController = new ScrollMagic.Controller();

      let scene = new ScrollMagic.Scene({
        duration: 1500,
        triggerElement: fullBg,
        triggerHook: 0
      })
      .setPin(fullBg)
      .addTo(fullBgController); 

      const textContentAnim = TweenMax.fromTo(textContent, 1, { scale: 1 }, { scale: 50 });
  
       let scene1 = new ScrollMagic.Scene({
         duration: 800,
         triggerElement: fullBg,
         triggerHook: 0
        })
         .setTween(textContentAnim)
         .addTo(fullBgController);
</script>




{% schema %}
    {
      "name": "Bike bg",
      "class": "bike-bg spaced-section",
      "tag": "section",
      "settings": [
        {
         "type": "checkbox",
         "id": "full_width",
         "default": false,
         "label": "t:sections.rich-text.settings.full_width.label"
        },
        {
          "type": "richtext",
          "id": "richtext",
          "label": "richtext"
        },
        {
         "type": "image_picker",
         "id": "image",
         "label": "Image"
        }
      ],
      "presets": [
        {
          "name": "Bike bg"
        }
      ]
    }
  {% endschema %}